<template>
  <div>
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>我的相册</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 表格 -->
      <el-table :data="fileList" style="width: 100%">
        <el-table-column label="链接">
          <template slot-scope="scope">
            <div class="img_preview">
              <span class="copy_img_url">{{ scope.row.img_url }}</span>
              <div class="demo-image__preview">
                <el-image :src="scope.row.img_url" :preview-src-list="img_list">
                </el-image>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="img_path" label="路径"> </el-table-column>
        <el-table-column prop="img_size" label="图片大小">
          <template slot-scope="scope">
            {{
              scope.row.img_size > 1024
                ? (scope.row.img_size / 1024).toFixed(2) + " MB"
                : scope.row.img_size + " KB"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="img_data" label="上传日期"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="img_btn_wrap">
              <div
                class="CopyQr_code img_btn"
                :data-clipboard-text="scope.row.img_url"
                @click="CopyQr_code"
              >
                <i class="el-icon-document-copy"></i>
              </div>

              <div
                class="btnQr_code img_btn"
                @click="btnQr_code(scope.row.img_url)"
              >
                <i class="el-icon-s-grid"></i>
              </div>
              <div class="btnDel img_btn" @click="img_del(scope.row)">
                <i class="el-icon-delete-solid"></i>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="fileInfo.pagenum"
        :page-sizes="[5, 10]"
        :page-size="fileInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="fileInfo.total"
      >
      </el-pagination>
    </el-card>
    <!-- 二维码 显示框 -->
    <div class="qrcode_wrap">
      <div class="Qr_Shut_down el-icon-close" @click="Qr_Shut_down"></div>
      <div class="qrcode" ref="qrCodeDiv"></div>
    </div>
    <div class="Qr_wrapper"></div>
  </div>
</template>

<script>
// 处理时间格式
import { formatTimeToStr } from "../data";
// 点击复制
import Clipboard from "clipboard";
// 生成二维码
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      // 图片对象数组
      fileList: [],
      // 图片信息对象
      fileInfo: {
        pagenum: 1,
        pagesize: 5,
        key: JSON.parse(sessionStorage.getItem("userinfo")).key,
        total: 0,
      },

      img_list: [],
    };
  },
  created() {
    this.getfileList();
  },
  methods: {
    // 获取图片对象列表
    async getfileList() {
      this.img_list = [];
      const { data: res } = await this.$http.get("/getimg", {
        params: this.fileInfo,
      });
      this.fileList = res.data.file;
      // 循环处理数据
      this.fileList.forEach((item, index) => {
        // 将图片的url 添加到 图片预览数据
        this.img_list.push(item.img_url);
        // 处理图片的上传时间格式
        this.fileList[index].img_data = formatTimeToStr(item.img_data);
        return;
      });
      this.fileInfo.total = res.data.total;
    },
    // 改变显示的条数触发
    handleSizeChange(size) {
      this.fileInfo.pagesize = size;
      this.getfileList();
    },
    // 改变页码值触发
    handleCurrentChange(page) {
      this.fileInfo.pagenum = page;
      this.getfileList();
    },
    // 文件删除触发
    img_del(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data: res } = await this.$http.delete("/delfile", {
            params: { id: row.id },
          });
          if (res.meta.status != 200) {
            this.$message.error(res.meta.msg);
            return;
          }
          this.getfileList();
          this.$message.success("删除成功!");
        })
        .catch(() => {});
    },
    // 生成二维码触发
    btnQr_code(url) {
      this.$nextTick(function () {
        var qrcode = new QRCode(this.$refs.qrCodeDiv, {
          text: url,
          width: 200,
          height: 200,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
        });
        let QR_wrap = document.querySelector(".qrcode_wrap");
        let Qr_wrapper = document.querySelector(".Qr_wrapper");
        QR_wrap.style.display = "block";
        Qr_wrapper.style.display = "block";
      });
    },
    // 二维码窗口关闭事件
    Qr_Shut_down() {
      let QR_wrap = document.querySelector(".qrcode_wrap");
      let Qr_wrapper = document.querySelector(".Qr_wrapper");
      let qrcode_img = document.querySelector(".qrcode img");
      Qr_wrapper.style.display = "none";
      QR_wrap.style.display = "none";
      // 删除元素
      qrcode_img.remove();
    },
    // 复制按钮事件触发
    CopyQr_code() {
      var clipboard = new Clipboard(".CopyQr_code");
      clipboard.on("success", (e) => {
        this.$message.success("复制成功！");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        this.$message.success("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    },
  },
};
</script>

<style scoped>
.demo-image__preview {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
}
.el-image {
  width: 100% !important;
  height: 100% !important;
}
.demo-image__preview img {
  width: 100%;
  height: 100%;
}
.img_btn_wrap {
  display: flex;
}
.img_btn {
  margin-left: 5px;
  width: 24px;
  height: 22px;
  text-align: center;
  line-height: 22px;
  border-radius: 3px;
  cursor: pointer;
}
.img_btn i {
  font-size: 14px;
  color: #fff;
}
.btnQr_code {
  margin-left: 5px;
  background: #23ad44;
}
.btnDel {
  background: #f05050;
}
.CopyQr_code {
  background: #23b7e5;
}
.qrcode_wrap {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 400px;
  height: 400px;
  background: #fff;
  text-align: center;
  border-radius: 10px;
  z-index: 99;
  animation: qrcoe_wrap 0.3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes qrcoe_wrap {
  0% {
    transform: translate(-50%, -60%);
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
.qrcode {
  width: 200px;
  height: 200px;
  margin: auto;
  transform: translate(0px, 50%);
}
.Qr_Shut_down {
  position: absolute;
  top: 5%;
  right: 5%;
  font-size: 20px;
  cursor: pointer;
  color: #909399;
}
.Qr_Shut_down:hover {
  color: #56a9ff;
}
.Qr_wrapper {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
</style>
